<template>
  <Dialog v-bind="$attrs" fixed :inner-loading="useInnerLoading" :before-change="useBeforeChange">
    <Form ref="formRef" :search-config="{ control, fields }" label-width="100px" />
  </Dialog>
</template>
<script lang="ts">
  export default { name: 'OrderDetailed' }
</script>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useOptions } from './options'
  const { control } = useOptions()
  /**
   * ref
   */
  const formRef = ref(null)
  /**
   * field
   */
  const fields = reactive({
    orderNo: '',
    orderState: [],
    carNo: '',
    orderDec: '',
  })
  const state = reactive({
    abc: 11,
  })

  const useBeforeChange = () => {
    return new Promise<void>((resolve, reject) => {
      formRef.value
        .checkForm()
        .then(() => {
          setTimeout(() => {
            resolve()
          }, 2000)
        })
        .catch(() => {
          reject()
        })
    })
  }

  // api
  const useInnerLoading = () => {
    return new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 500)
    })
  }
</script>
